
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>品牌管理</title>
<link href="../../../css/main.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../../../bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" class="tabe_div">
    <p class="p_line text_ient"><a class="find_a">名称：</a><input type="text" v-model="name" class="form_input text_ient" placeholder="输入名称"/>
        <input  type="button" @click="getbrand()" value="查询" class="but_find"/><p>
    <p class="p_table">
        <a href="#" class="a_add" id="add_box" @click="dialogFormVisible=true">添加</a>
        <a href="#" class="a_add">全部导出</a>
    </p>

    <template>
        <el-table ref="adminTable"
                  :data="brand"
                  style="width: 100%;">
            <el-table-column
                    prop="pid"
                    label="品牌序号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="品牌名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="pmsg"
                    label="品牌信息"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="display"
                    label="是否显示"
                    width="120">
                <template slot-scope="scope">{{scope.row.display== 1 ? '已显示':'未显示'}}</template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click.prevent="handupdate(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click.prevent="delbr(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div class="col-md-12">
        <div class="text-center">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total" @current-change="getbrand" page-size="10">
            </el-pagination>
        </div>
    </div>
    <el-dialog title="品牌信息编辑" :visible.sync="dialogFormVisible">
        <el-form >
            <el-form-item label="品牌名称" label-width="150px">
                <el-input v-model="brand.pname" autocomlete="off"></el-input>
            </el-form-item>
            <el-form-item label="品牌信息" :label-width="150">
                <el-input v-model="brand.pmsg" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否显示" :label-width="150">
                <select class="form_select" style="padding-left: 1%;" v-model="brand.display">
                    <option value="1" selected="selected">显示</option>
                    <option value="0">不显示</option>
                </select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="inorup">确 定</el-button>
        </div>
    </el-dialog>


</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            dialogFormVisible : false,
            name : "",
            brand : {
                pid: null,
                bid:"",
                pname:"",
                pmsg:"",
                display:""
            },
            total : ""
        },
        created(){
            this.getbrand();
        },
        methods: {
            inorup(){
                if(this.brand.pid==null){
                    this.insertbrand();
                }else {
                    this.updatebrand();
                }
            },
            getbrand(page){
                page = page || 1;
                let url = "cs-manage/chaoshi/pmsBrand/selectbrand?page="+page;
                if(this.name){
                    url +="&pname=" + this.name
                }
                axios.get(url).then(res=>{
                    this.brand=res.data.records;
                    this.total = res.data.total;
                    console.log(this.brand)
                });
            },
            handupdate(row){
                this.brand=row;
                this.dialogFormVisible=true;
            },
            updatebrand(){
                let url =
                    "cs-manage/chaoshi/pmsBrand/updateBrand?" +
                    "pname="+this.brand.pname+"&pmsg="
                    +this.brand.pmsg+"&display="+this.brand.display+"&pid="+this.brand.pid;
                axios.get(url).then(res=>{
                    console.log(res.data.message)
                    this.$message({
                        message: "修改成功"
                    });
                    this.getbrand();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '修改失败'
                    });
                });
                this.brand="";
            },
            delbr(row){
                let url = "cs-manage/chaoshi/pmsBrand/deleteBrand?pid="+row.pid;
                this.$confirm('是否要删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.get(url).then(res=>{
                        console.log(res.data.message)
                        this.$message({
                            message: "删除成功"
                        });
                        this.getbrand();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                })
            },
            insertbrand(){
                let url = "cs-manage/chaoshi/pmsBrand/insertBrand?" +
                    "pname="+this.brand.pname+"&pmsg="
                    +this.brand.pmsg+"&display="+this.brand.display;
                this.$confirm('是否要添加?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.get(url).then(res=>{
                        console.log(res.data.message)
                        this.$message({
                            message: "添加成功"
                        });
                        this.getbrand();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消操作'
                    });
                })
            }
        }
    })
</script>
</body>
</html>
